<template>
  <el-dialog title="添加商品" :close-on-click-modal="false" :visible.sync="showAddProductDialog">
    <el-form ref="addProductFrom" :rules="rules" :model="addProductFrom" label-width="80px">
        <el-form-item label="商品名称" prop="name">
            <el-input v-model="addProductFrom.name"></el-input>
        </el-form-item>
        <el-form-item label="商品内容" prop="content">
            <el-input type="textarea" v-model="addProductFrom.content"></el-input>
        </el-form-item>
        <el-form-item label="商品图片" prop="img">
            <el-upload
            :multiple=true
            ref='upload'
            action="api.addImg"
            list-type="picture-card"
            :http-request="upload"
            :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
           
        </el-form-item>
    
    </el-form>
    <div slot="footer" class="dialog-footer">
        <el-button @click="showAddProductDialog = false">取 消</el-button>
        <el-button type="primary" :loading="sureBtnLoading" @click="sureSubmit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
// import http from '@/utils/request'
import axios from 'axios'



export default {
    data() {
        return {
             dialogImageUrl: '',
            fileList: [],
            // dialogImageUrl:[],
            api:{addImg:'http://localhost:8082/eduoss/fileOss1'},

            dialogVisible:false,
            sureBtnLoading: false,
            showAddProductDialog: false,
            addProductFrom: {
                name: '',
                content: ''
            },
            rules: {
                name: [
                    { required: true, message: '请输入商品名', trigger: 'blur' },
                    { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
                ],
                content: [
                    { required: true, message: '请输入商品内容', trigger: 'blur' },
                    { min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur'}
                ]
            }
        }
    },
    methods: {
        sureSubmit() {
            this.submitUpload()
        },handleRemove(file, fileList) {
        this.fileList = fileList
      },
      upload(fileObj) {
          this.fileList.push(fileObj)
      },
      submitUpload () {
            let formdata = new FormData()
            let name = this.addProductFrom.name
            let content = this.addProductFrom.content
            formdata.append('name',name)
            formdata.append('content',content)
            this.fileList.forEach(el =>{
                formdata.append('file',el.file)
            })
            axios.post('http://localhost:8082/ProductController/fileOss2',
            formdata, {
                headers: {
                'Content-Type': 'multipart/form-data'
                }
            }).then(() => {
                        this.sureBtnLoading = false
                        this.showAddProductDialog = false
                        this.$message({
                          message: '数据添加成功',
                            type: 'success'
                        });
                        this.$refs.addProductFrom.resetFields()
                        this.$refs.upload.clearFiles();
                        this.$emit('refresh')
                   })
            .catch(res => {
                console.log(res)
            })
    },
     


    }
}
</script>

<style>

</style>